<template>
  <section class="ports-map">
    <div class="container">
      <h2 class="section-title">
        <font-awesome-icon :icon="faMapLocationDot" class="section-icon" />
        入境口岸地图
      </h2>
      <p class="section-description">查看中国主要入境口岸位置，了解过境免签政策适用口岸</p>
      
      <div class="map-container">
        <div id="map" class="map"></div>
        <div class="map-legend">
          <div class="legend-item">
            <span class="legend-marker airport"></span>
            <span class="legend-text">机场口岸</span>
          </div>
          <div class="legend-item">
            <span class="legend-marker seaport"></span>
            <span class="legend-text">海港口岸</span>
          </div>
          <div class="legend-item">
            <span class="legend-marker railway"></span>
            <span class="legend-text">铁路口岸</span>
          </div>
        </div>
      </div>
      
      <div class="ports-list">
        <h3>主要入境口岸列表</h3>
        <div class="ports-grid">
          <div class="port-card" v-for="port in ports" :key="port.id">
            <div class="port-icon" :class="port.type">
              <font-awesome-icon :icon="getPortIcon(port.type)" />
            </div>
            <div class="port-info">
              <h4>{{ port.name }}</h4>
              <p>{{ port.location }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { 
  faMapLocationDot,
  faPlane,
  faShip,
  faTrain
} from '@fortawesome/free-solid-svg-icons'

library.add(faMapLocationDot, faPlane, faShip, faTrain)

// 口岸数据
const ports = ref([
  // 华北地区
  { id: 1, name: '北京首都国际机场', location: '北京市', type: 'airport', coordinates: [116.597, 40.080] },
  { id: 2, name: '北京大兴国际机场', location: '北京市', type: 'airport', coordinates: [116.410, 39.509] },
  { id: 3, name: '天津滨海国际机场', location: '天津市', type: 'airport', coordinates: [117.346, 39.124] },
  { id: 4, name: '天津港', location: '天津市', type: 'seaport', coordinates: [117.673, 39.040] },
  { id: 5, name: '石家庄正定国际机场', location: '河北省', type: 'airport', coordinates: [114.697, 38.281] },
  { id: 6, name: '太原武宿国际机场', location: '山西省', type: 'airport', coordinates: [112.628, 37.747] },
  { id: 7, name: '呼和浩特白塔国际机场', location: '内蒙古自治区', type: 'airport', coordinates: [111.823, 40.849] },
  { id: 8, name: '二连浩特口岸', location: '内蒙古自治区', type: 'railway', coordinates: [111.977, 43.653] },
  { id: 9, name: '满洲里口岸', location: '内蒙古自治区', type: 'railway', coordinates: [117.379, 49.589] },

  // 东北地区
  { id: 10, name: '沈阳桃仙国际机场', location: '辽宁省', type: 'airport', coordinates: [123.483, 41.640] },
  { id: 11, name: '大连周水子国际机场', location: '辽宁省', type: 'airport', coordinates: [121.539, 38.965] },
  { id: 12, name: '大连港', location: '辽宁省', type: 'seaport', coordinates: [121.673, 38.917] },
  { id: 13, name: '长春龙嘉国际机场', location: '吉林省', type: 'airport', coordinates: [125.685, 43.996] },
  { id: 14, name: '哈尔滨太平国际机场', location: '黑龙江省', type: 'airport', coordinates: [126.250, 45.623] },
  { id: 15, name: '绥芬河口岸', location: '黑龙江省', type: 'railway', coordinates: [131.152, 44.396] },

  // 华东地区
  { id: 16, name: '上海浦东国际机场', location: '上海市', type: 'airport', coordinates: [121.805, 31.144] },
  { id: 17, name: '上海虹桥国际机场', location: '上海市', type: 'airport', coordinates: [121.336, 31.198] },
  { id: 18, name: '上海港', location: '上海市', type: 'seaport', coordinates: [121.479, 31.230] },
  { id: 19, name: '南京禄口国际机场', location: '江苏省', type: 'airport', coordinates: [118.872, 31.742] },
  { id: 20, name: '无锡苏南硕放国际机场', location: '江苏省', type: 'airport', coordinates: [120.429, 31.494] },
  { id: 21, name: '杭州萧山国际机场', location: '浙江省', type: 'airport', coordinates: [120.434, 30.229] },
  { id: 22, name: '宁波栎社国际机场', location: '浙江省', type: 'airport', coordinates: [121.461, 29.826] },
  { id: 23, name: '宁波港', location: '浙江省', type: 'seaport', coordinates: [121.713, 29.868] },
  { id: 24, name: '合肥新桥国际机场', location: '安徽省', type: 'airport', coordinates: [117.298, 31.989] },
  { id: 25, name: '福州长乐国际机场', location: '福建省', type: 'airport', coordinates: [119.663, 25.935] },
  { id: 26, name: '厦门高崎国际机场', location: '福建省', type: 'airport', coordinates: [118.127, 24.544] },
  { id: 27, name: '厦门港', location: '福建省', type: 'seaport', coordinates: [118.089, 24.479] },
  { id: 28, name: '南昌昌北国际机场', location: '江西省', type: 'airport', coordinates: [115.900, 28.865] },
  { id: 29, name: '济南遥墙国际机场', location: '山东省', type: 'airport', coordinates: [117.216, 36.857] },
  { id: 30, name: '青岛流亭国际机场', location: '山东省', type: 'airport', coordinates: [120.374, 36.266] },
  { id: 31, name: '青岛港', location: '山东省', type: 'seaport', coordinates: [120.319, 36.067] },

  // 华中地区
  { id: 32, name: '郑州新郑国际机场', location: '河南省', type: 'airport', coordinates: [113.841, 34.519] },
  { id: 33, name: '武汉天河国际机场', location: '湖北省', type: 'airport', coordinates: [114.208, 30.784] },
  { id: 34, name: '长沙黄花国际机场', location: '湖南省', type: 'airport', coordinates: [113.220, 28.189] },

  // 华南地区
  { id: 35, name: '广州白云国际机场', location: '广东省', type: 'airport', coordinates: [113.299, 23.392] },
  { id: 36, name: '深圳宝安国际机场', location: '广东省', type: 'airport', coordinates: [113.819, 22.639] },
  { id: 37, name: '广州港', location: '广东省', type: 'seaport', coordinates: [113.364, 23.099] },
  { id: 38, name: '深圳港', location: '广东省', type: 'seaport', coordinates: [114.156, 22.543] },
  { id: 39, name: '珠海金湾机场', location: '广东省', type: 'airport', coordinates: [113.376, 22.006] },
  { id: 40, name: '南宁吴圩国际机场', location: '广西壮族自治区', type: 'airport', coordinates: [108.188, 22.608] },
  { id: 41, name: '桂林两江国际机场', location: '广西壮族自治区', type: 'airport', coordinates: [110.039, 25.218] },
  { id: 42, name: '海口美兰国际机场', location: '海南省', type: 'airport', coordinates: [110.459, 19.934] },
  { id: 43, name: '三亚凤凰国际机场', location: '海南省', type: 'airport', coordinates: [109.412, 18.303] },

  // 西南地区
  { id: 44, name: '重庆江北国际机场', location: '重庆市', type: 'airport', coordinates: [106.634, 29.718] },
  { id: 45, name: '成都双流国际机场', location: '四川省', type: 'airport', coordinates: [103.947, 30.578] },
  { id: 46, name: '昆明长水国际机场', location: '云南省', type: 'airport', coordinates: [102.929, 24.992] },
  { id: 47, name: '西双版纳嘎洒国际机场', location: '云南省', type: 'airport', coordinates: [100.760, 21.973] },
  { id: 48, name: '瑞丽口岸', location: '云南省', type: 'railway', coordinates: [97.851, 24.008] },
  { id: 49, name: '磨憨口岸', location: '云南省', type: 'railway', coordinates: [101.567, 21.448] },
  { id: 50, name: '拉萨贡嘎国际机场', location: '西藏自治区', type: 'airport', coordinates: [90.912, 29.298] },

  // 西北地区
  { id: 51, name: '西安咸阳国际机场', location: '陕西省', type: 'airport', coordinates: [108.751, 34.447] },
  { id: 52, name: '兰州中川国际机场', location: '甘肃省', type: 'airport', coordinates: [103.620, 36.515] },
  { id: 53, name: '西宁曹家堡国际机场', location: '青海省', type: 'airport', coordinates: [102.042, 36.527] },
  { id: 54, name: '银川河东国际机场', location: '宁夏回族自治区', type: 'airport', coordinates: [106.393, 38.322] },
  { id: 55, name: '乌鲁木齐地窝堡国际机场', location: '新疆维吾尔自治区', type: 'airport', coordinates: [87.474, 43.907] },
  { id: 56, name: '霍尔果斯口岸', location: '新疆维吾尔自治区', type: 'railway', coordinates: [80.420, 44.201] },
  { id: 57, name: '阿拉山口口岸', location: '新疆维吾尔自治区', type: 'railway', coordinates: [82.568, 45.172] },

  // 港澳台地区
  { id: 58, name: '香港国际机场', location: '香港特别行政区', type: 'airport', coordinates: [113.936, 22.308] },
  { id: 59, name: '澳门国际机场', location: '澳门特别行政区', type: 'airport', coordinates: [113.606, 22.156] },
  { id: 60, name: '台北桃园国际机场', location: '台湾地区', type: 'airport', coordinates: [121.232, 25.080] }
]);

// 获取口岸图标
const getPortIcon = (type) => {
  switch (type) {
    case 'airport':
      return faPlane;
    case 'seaport':
      return faShip;
    case 'railway':
      return faTrain;
    default:
      return faMapLocationDot;
  }
};

onMounted(() => {
  // 动态引入百度地图脚本
  const script = document.createElement('script');
  script.src = 'https://api.map.baidu.com/api?v=3.0&ak=DpbJ4hDkZSlBHunZMkVrQ2h0cRrwfpr0&callback=initBMap';
  document.head.appendChild(script);
  
  // 初始化地图
  window.initBMap = function() {
    const map = new BMap.Map('map');
    const point = new BMap.Point(116.404, 39.915); // 北京中心
    map.centerAndZoom(point, 5);
    map.enableScrollWheelZoom(true);
    
    // 使用labelMarker代替标准marker
    ports.value.forEach(port => {
      // 基于口岸类型设置颜色
      let markerColor;
      switch(port.type) {
        case 'airport':
          markerColor = '#3b82f6'; // 蓝色
          break;
        case 'seaport':
          markerColor = '#10b981'; // 绿色
          break;
        case 'railway':
          markerColor = '#f59e0b'; // 黄色
          break;
        default:
          markerColor = '#3b82f6';
      }
      
      // 创建自定义的覆盖物
      const marker = new BMap.Marker(new BMap.Point(port.coordinates[0], port.coordinates[1]));
      map.addOverlay(marker);
      
      // 为每个marker添加自定义的svg标签作为label
      const label = new BMap.Label('', {
        position: new BMap.Point(port.coordinates[0], port.coordinates[1]),
        offset: new BMap.Size(-10, -10)
      });
      
      // 创建SVG标记
      const svgCircle = `
        <div style="
          width: 20px; 
          height: 20px; 
          border-radius: 50%; 
          background-color: ${markerColor}; 
          border: 2px solid white;
          box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        "></div>
      `;
      
      label.setContent(svgCircle);
      label.setStyle({
        border: 'none',
        backgroundColor: 'transparent'
      });
      
      map.addOverlay(label);
      
      // 隐藏原始marker
      marker.hide();
      
      // 创建信息窗体
      const infoWindow = new BMap.InfoWindow(`
        <div class="info-window">
          <h3>${port.name}</h3>
          <p>${port.location}</p>
          <p class="port-type">${getPortTypeName(port.type)}</p>
        </div>
      `);
      
      // 点击标签时显示信息窗体
      label.addEventListener('click', () => {
        map.openInfoWindow(infoWindow, new BMap.Point(port.coordinates[0], port.coordinates[1]));
        map.panTo(new BMap.Point(port.coordinates[0], port.coordinates[1]));
      });
    });
  };
});

// 获取口岸类型名称
const getPortTypeName = (type) => {
  switch(type) {
    case 'airport':
      return '机场口岸';
    case 'seaport':
      return '海港口岸';
    case 'railway':
      return '铁路口岸';
    default:
      return '其他口岸';
  }
};
</script>

<style scoped>
.ports-map {
  padding: 80px 0;
  background-color: #f8fafc;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-title {
  text-align: center;
  font-size: 36px;
  color: #1a3a5f;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.section-icon {
  font-size: 36px;
  color: #16a34a;
}

.section-description {
  text-align: center;
  color: #4a5568;
  margin-bottom: 50px;
  font-size: 18px;
}

.map-container {
  position: relative;
  height: 500px;
  margin-bottom: 40px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.map {
  width: 100%;
  height: 100%;
}

.map-legend {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: white;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.legend-item:last-child {
  margin-bottom: 0;
}

.legend-marker {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.legend-marker.airport {
  background-color: #3b82f6;
}

.legend-marker.seaport {
  background-color: #10b981;
}

.legend-marker.railway {
  background-color: #f59e0b;
}

.legend-text {
  font-size: 14px;
  color: #4a5568;
}

.ports-list {
  background-color: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.ports-list h3 {
  font-size: 24px;
  color: #1a3a5f;
  margin-bottom: 24px;
}

.ports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.port-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background-color: #f8fafc;
  border-radius: 8px;
  transition: transform 0.2s ease;
}

.port-card:hover {
  transform: translateY(-2px);
}

.port-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
}

.port-icon.airport {
  background-color: #3b82f6;
}

.port-icon.seaport {
  background-color: #10b981;
}

.port-icon.railway {
  background-color: #f59e0b;
}

.port-info h4 {
  font-size: 16px;
  color: #2d3748;
  margin-bottom: 4px;
}

.port-info p {
  font-size: 14px;
  color: #718096;
  margin: 0;
}

.info-window {
  padding: 12px;
  max-width: 200px;
}

.info-window h3 {
  font-size: 16px;
  color: #2d3748;
  margin-bottom: 4px;
}

.info-window p {
  font-size: 14px;
  color: #718096;
  margin: 0;
}

.port-type {
  font-size: 12px;
  color: #718096;
  margin-top: 4px;
}

@media (max-width: 768px) {
  .map-container {
    height: 400px;
  }
  
  .ports-grid {
    grid-template-columns: 1fr;
  }
}
</style> 